<template>
    <transition name="move">
        <div class="memberInfo" v-show="memberInfoFlag">
            <mTitle :title="title" :returnShow="returnShow" @clickHide="hide"></mTitle>
            <scroll class="member-info-container" :dataObj="memberInfoList" :listenScroll="returnShow" @scroll="scroll">
                <div>
                    <div class="member-info-name">
                        <span class="text">姓名：</span>
                        <span class="name">{{memberInfoList.truename}}</span>
                    </div>
                    <div class="member-info-desc">
                        <span class="text">成员介绍：</span>
                        <p class="desc">{{memberInfoList.content}}</p>
                    </div>
                </div>
            </scroll>
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'

    export default {
        props: {
            memberInfoList: {
                type: Object
            }
        },  
        data () {
            return {
                title: "成员详情",
                returnShow: true,
                memberInfoFlag: false
            }
        },
        methods: {
            show () {
                this.memberInfoFlag = true
            },
            hide () {
                this.memberInfoFlag = false
            },
            scroll (pos) {
                console.log(111)
            }
        },
        components: {mTitle,Scroll}
    }
</script>

<style lang="stylus" scoped>
    .memberInfo
        width: 100%
        height: 100%
        position: fixed
        top: 0
        left: 0
        z-index: 99
        bottom: 0
        overflow: hidden
        background: #fff
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .member-info-container
            position: absolute
            top: 44px
            bottom: 0
            width: 100%
            padding: 0 15px
            box-sizing: border-box
            overflow: hidden
            .member-info-name
                width: 100%
                font-size: 0
                padding-top: 10px
                .text
                    font-size: 16px
                    display: inline-block
                .name
                    display: inline-block
                    font-size: 16px
            .member-info-desc
                width: 100%
                margin-top: 16px
                .text
                    font-size: 16px
                    display: inline-block
                .desc
                    font-size: 16px
                    line-height: 150%
                    margin-top: 6px
                    color: #888
                    text-align: justify
            .member-info-imgArr
                margin-top: 10px
                width: 100%
                padding-bottom: 20px
                .img-list
                    width: 100%
                    margin-bottom: 10px
                    img
                        width: 100%
                
</style>